<!--
 * @Author: ssj
 * @Date: 2021-10-15 17:55:22
 * @LastEditors: zss
 * @LastEditTime: 2024-06-27 11:43:26
 * @Description: 
-->
<template>
  <Tabs
    :type="config.tabStyle.type"
    :name="randomTabName"
    :closable="config.tabStyle.closable"
    :animated="config.tabStyle.animated"
    class="basetab frame"
  >
    <TabPane
      v-for="(item, idx) of config.panels"
      :key="randomTabName + idx"
      :label="item.label"
      :tab="randomTabName"
    >
      <div v-if="item.content.type == 'plant'">{{ item.content.name }}</div>
      <o-layout
        v-else-if="item.content.type === 'layout'"
        :config="item.content"
      >
      </o-layout>
      <component
        v-else-if="(item.content.type = 'comp')"
        :is="$utils.findComponent(item.content.name)"
        v-bind="{ config: item.content.config }"
      ></component>
    </TabPane>
  </Tabs>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class oBaseTab extends Vue {
  // modify by wiz
  public compName: string = 'oBaseTab';

  /**
   * props
   */
  @Prop({
    required: true
  })
  config!: any;

  private randomTabName = `tab${this.getRandomName()}`;

  private listenType = 'default';

  public name = 'oBaseTab';

  created() {
    this.listenType = this.config['listenType'] || 'default';
    this.config.panels.forEach(el => {
      el.content.config.listenType = this.listenType;
    });
  }

  private getRandomName() {
    const name = Tsrv.utils.random(1, 100000);
    return name;
  }
}
</script>
<style scoped></style>
